<template>
  <div id="app">
      <router-link to="/goback">goback</router-link>
    <img src="./assets/logo.png">
    <header>
      <router-link to="/home">Home</router-link>
      <router-link to="/about">about</router-link>
      <router-link to="/user/123">user1</router-link>
      <router-link to="/user/345">user2</router-link>
      <router-link to="/qiantao/321">quabtai</router-link>
      <router-link to="/multRoute">multRoute</router-link>
      <router-link to="/params/198/jspang website is very good">params page</router-link>
      <router-link to="/goParams/888/jspang redirect">params redirect page</router-link>
      <!-- alias别名 -->
      <router-link to="/jspang">使用别名重定向</router-link>
      <router-link to="/tran">transition</router-link>
      <router-link to="/akwuefhajwkhefa">用来跳404页面的</router-link>
    </header>
    <transition>
      <router-view/>
    </transition>
    <!-- <transition name="fade">
      <route-view name="ntran"></route-view> ??????????????????????
    </transition> -->
    <button @click='goback'>后退</button>
    <router-view name="left" style="width:49%;border:1px solid black;float:right;"></router-view>
    <router-view name="right"  style="width:49%;border:1px solid black;float:left;"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    goback(){
      this.$router.go(-1);
    },
    jumpTo(link){
      this.$router.push('/'+link)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.v-enter {
  opacity:0;
}
.v-leave{
  opacity:1;
}
.v-enter-active{
  transition:opacity .5s;
}
.v-leave-active{
  opacity:0;
  transition:opacity .5s;
}
</style>
